<template>
	<div id="screen">
		<div class="bg">
			<img src="../../assets/img/bg_screen.png" class="bgimg" />
			<img src="../../assets/img/gugong_logo.png" class="logo" />
			<span class="time" @click="jump()" >{{time}}跳过</span>
			<p>故宫文创</p>
		</div>

	</div>
</template>

<script>
	export default {
		name: 'screen',
		data() {
			return {
				time: 3,
				jumpTime: ''
			}
		},
		components: {

		},
		created() {
			this.jumpTime = setInterval(() => {
				this.time -= 1;
				if (this.time == 0) {
					clearInterval(this.jumpTime);
					this.$router.push({
						path: "/login",
					});
				}
			}, 1000);
		},
	}
</script>

<style scoped="scoped">
	.bg {
		height: 8.12rem;

	}

	.bgimg {
		display: block;
		width: 100%;
		height: 7.11rem;
	}

	.logo {
		width: 0.5rem;
		height: 0.5rem;
		position: absolute;
		left: 1.63rem;
		top: 7.23rem;
	}

	p {
		font-size: 0.12rem;
		color: #333333;
		position: absolute;
		left: 1.64rem;
		top: 7.81rem;
	}

	.time {
		position: absolute;
		right: 0.05rem;
		font-size: 0.12rem;
		top: 0;
		color: #fff;
		background-color: #333333;
		padding: 0.05rem;
		border-radius: 50%;
	}
</style>
